<template>
 <div>
 
    <el-table :data="problemList" style="width: 100%" @selection-change="handleSelectionChange" :header-cell-style="{width:'100%',height:'48px',background:'#F0F2F7',fontSize:'14px',fontWeight:'bold',color:'#333'}">
        <!-- 是否显示行 -->
    <el-table-column v-if="showSelectColumn"  type="selection" label="选中" align="center" width="60"></el-table-column>
        <!-- 显示序号 -->
        <el-table-column v-if="showIndexColumn" type="index" label="序号" align="center" width="60"></el-table-column>
        
        <div  v-for="propItem in propList" :key="propItem.prop">
       <el-table-column :prop="propItem.prop" :label="propItem.label"  align='center'> 
           <!-- 通过作用域插槽拿数据 -->
           <template slot-scope="scope">
                <!-- 外界要改变插槽的样式  就是用插槽 拿到当前行 row是个内置的属性 -->
                <slot :name="propItem.slotName" :data="scope.row">  
                   {{scope.row[propItem.prop]}}
                </slot>
           </template>
       </el-table-column>
        </div>
    </el-table>
    <!-- 底部分页 -->
    <div class="WorkOrder_handler">
  <el-pagination
    layout="prev, pager, next"
    :total="50">
  </el-pagination>
</div>

 </div>
</template>

<script>
export default {
 data () {
 return {
 }
 },
 props:{
   propList:{
       type:Array,
       required:true,
       default:()=>[]
   },
   problemList:{
        type:Array,
       required:true,
       default:()=>{}
 },
 //显示序号
 showIndexColumn:{
     type:Boolean,
     default:false
 },
 //显示是否可以选中
 showSelectColumn:{
      type:Boolean,
     default:false
 }
 },

 components: {},

//控制选中拿到数据
 methods: {
     handleSelectionChange(value){
          this.$emit('selectionChange',value)
     }
 }
}
</script>

<style scoped>
</style>